<script setup>
  import {ref,reactive} from 'vue'
  import request from '../utils/request.js'
  import {useRouter} from 'vue-router'

  const router = useRouter()
  let registUser = reactive({
    username:"",
    userPwd:""
  })

  let usernameMsg = ref("")
  let userPwdMsg = ref("")
  let reUserPwdMsg = ref("")
  let reUserPwd = ref("")

  async function checkUsername(){
        let usernameReg = /^[a-zA-Z0-9]{5,10}$/
        if(!usernameReg.test(registUser.username)){
            usernameMsg.value = "格式有误"
            return false
        }

        let {data} = await request.post(`/user/checkUsernameUsed?username=${registUser.username}`)
        if(data.code != 200){
          usernameMsg.value="用户名占用"
          return false
        }

        usernameMsg.value = "OK"
        return true
    }


  function checkuserPwd(){
      let userPwdReg = /^[0-9]{6}$/
      // 校验密码
      if(!userPwdReg.test(registUser.userPwd)){
        // 格式不合法
        userPwdMsg.value="格式有误"
        return false
      }
      userPwdMsg.value="ok"
      return true

  }

  function checkReUserPwd(){
    let userPwdReg = /^[0-9]{6}$/
      // 校验密码
      if(!userPwdReg.test(reUserPwd.value)){
        // 格式不合法
        reUserPwdMsg.value="格式有误"
        return false
      }
      // 校验
      if(!(registUser.userPwd==reUserPwd.value)){
        // 提示
        reUserPwdMsg.value = "不一致"
        return false
      }
      reUserPwdMsg.value="ok"
      return true
  }

  async function regist(){
    let flag1 = await checkUsername();
    let flag2 = checkuserPwd();
    let flag3 = checkReUserPwd();
    if(flag1 && flag2 && flag3){
      // 表单数据格式都正确再提交
      let flag1 =checkUsername()
      let flag2 =checkUserPwd()
      if(!(flag1 && flag2)){
          return 
      }
      let {data} = await request.post('user/register',registUser)
      if(data.code == 200){
        alert("注册成功，快去登录吧")
        router.push('/login')
      }else{
        alert("用户名被抢注了")
      }
    }else{
      alert("校验不通过，请再次检查注册信息")
    }

  }


</script>

<template>
  <div>
    <h3 class="ht">请注册</h3>
    <table class="tab" cellspacing="0px">
      <tr class="ltr">
        <td>请输入账号</td>
        <td>
          <input type="text" class="ipt" id="usernameInput" v-model="registUser.username" @blur="checkUsername()">
          <span id="usernameMsg" v-text="usernameMsg" class="msg"></span>
        </td>
      </tr>
      <tr>
        <td>请输入密码</td>
        <td>
          <input type="password" class="ipt" id="userPwdInput" v-model="registUser.userPwd" @blur="checkuserPwd()">
          <span id="userPwdMsg" v-text="userPwdMsg" class="msg"></span>
        </td>
      </tr>
      <tr>
        <td>确认密码</td>
        <td>
          <input type="password" class="ipt" id="reUserPwdInput" v-model="reUserPwd" @blur="checkReUserPwd()">
          <span id="reUserPwdMsg" v-text="reUserPwdMsg" class="msg"></span>
        </td>
      </tr>
      <tr>
        <td colspan="2"  class="buttonContainer">
          <input class="btn1" type="button" value="注册" @click="regist()">
          <input class="btn1" type="button" value="重置">
          <router-link to="/login">
            <button class="btn1">去登录</button>
          </router-link>
        </td>
        
      </tr>
    </table>
  </div>

</template>

<style scoped>
  .ht{
    text-align: center;
    color: cadetblue;
    font-family: 幼圆;
  }

  .tab{
    width: 500px;
    margin: 0px auto;
    border: 5px solid cadetblue;
    border-radius: 5px;
    font-family: 幼圆;
  }
  .msg{
    color: gold;
  }

  .ltr td{
    border: 1px solid  powderblue;
  }

  .btn1{
    border: 2px solid powderblue;
    border-radius: 4px;
    width:60px;
    background-color: antiquewhite;
  }
  .buttonContainer{
    text-align: center;
  }


</style>
